Skip to content

Radio icon buttons - #5121

Merged
stuartromanek merged 4 commits into
mainfrom
radio-icon-buttons
Nov 11, 2025
Merged

stuartromanek merged 4 commits into
mainfrom
radio-icon-buttons

Conversation

@stuartromanek

@stuartromanek stuartromanek commented Oct 23, 2025 •

Copy link
Copy Markdown
Member

Summary

  • Adds buttons setting to radio input
  • both button mode and not support icons
  • everything keyboard accessible
  • focus states

Preview

Clipboard-20251023-185458-778.mp4

Field configs of interest

radioFields: {
  label: 'Regular Radio',
  type: 'radio',
  choices: [
    {
      label: 'Small',
      value: 'small'
    },
    {
      label: 'Medium',
      value: 'med'
    },
    {
      label: 'Big',
      value: 'big'
    }
  ]
},
radioIconsFields: {
  label: 'Radios with Icons',
  type: 'radio',
  choices: [
    {
      label: 'Up',
      value: 'up',
      icon: 'arrow-up-icon'
    },
    {
      label: 'Down',
      value: 'down',
      icon: 'arrow-down-icon'
    },
    {
      label: 'Left',
      value: 'left',
      icon: 'arrow-left-icon'
    },
    {
      label: 'Right',
      value: 'right',
      icon: 'arrow-right-icon'
    }
  ]
},
radioButtonsFields: {
  label: 'Radio buttons with labels',
  type: 'radio',
  buttons: true,
  choices: [
    {
      label: 'Left',
      value: 'left',
      icon: 'format-align-left-icon'
    },
    {
      label: 'Center',
      value: 'center',
      icon: 'format-align-center-icon'
    },
    {
      label: 'Right',
      value: 'right',
      icon: 'format-align-right-icon'
    }
  ]
},
radioButtonsTooltipsFields: {
  label: 'Radio buttons with tooltips',
  type: 'radio',
  buttons: true,
  choices: [
    {
      tooltip: 'Left',
      value: 'left',
      icon: 'format-align-left-icon'
    },
    {
      tooltip: 'Center',
      value: 'center',
      icon: 'format-align-center-icon'
    },
    {
      tooltip: 'Right',
      value: 'right',
      icon: 'format-align-right-icon'
    }
  ]
},

Tests

https://github.com/apostrophecms/testbed/actions/runs/18760973118

Related

https://github.com/apostrophecms/testbed/pull/394

@BoDonkey BoDonkey left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One part of me says, " we are acshually in code freeze", but the cowboy part of me says" F*ck yeh, looks great to me!"

@stuartromanek
stuartromanek merged commit 6c78931 into main Nov 11, 2025
9 checks passed
@stuartromanek
stuartromanek deleted the radio-icon-buttons branch November 11, 2025 13:07
haroun added a commit that referenced this pull request Nov 11, 2025
…ation

* main:
  fix tooltip prop (#5139)
  Radio icon buttons (#5121)
  Fix typos in some files (#5144)
  PRO-8571: fix the astro section template library bug introduced in astro 4.9.0 (#5140)
  bump nodemailer to v7 (#5138)
  Pro 8563 translation (#5134)
  release 4.23.0 (#5132)
  change disabled layout translation (#5131)
  max width for micro color label (#5130)
  uses operation name for key and id (test purpose) (#5129)
  Fix native actions params (#5128)
  moves widget operations to backend (#5111)
haroun added a commit that referenced this pull request Nov 11, 2025
* main:
  fix tooltip prop (#5139)
  Radio icon buttons (#5121)
  Fix typos in some files (#5144)
  PRO-8571: fix the astro section template library bug introduced in astro 4.9.0 (#5140)
  bump nodemailer to v7 (#5138)
  Pro 8563 translation (#5134)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants